<template>
	<div class="visitor-export">
		<!--<comp-banner :list="bannerList"></comp-banner>
		<div class="no-response">
			<h2>免责声明</h2>
			<p>本页面所有产品均由第三方提供，有关责任由相应平台承担</p>
		</div>
		<ul v-show="!!list.length">
			<li v-for="item in list" @click="listNavigate(item)">
				<img :src="item.logo" :alt="item.title">
				<div>
					<h2>{{ item.companyName }}</h2>
					<a>立即申请</a>
					<p class="limit">最高额度：<span>{{ item.limit }}万</span></p>
					<p class="rate">最低日费率：<span>{{ item.dayRate }}%</span></p>
				</div>
				<p v-show="item.advertisementDesc">{{ item.advertisementDesc }}</p>
			</li>
		</ul>-->
		<comp-loading :isShow="isLoadingShow" :type="'gif'"></comp-loading>
		<comp-toast :isShow="isToastShow" :message="toastMessage" @hide="toastHide"></comp-toast>
	</div>
</template>

<script>
	import CompLoading from '@/components/loading.vue';
	import CompToast from '@/components/toast.vue';

	export default {
		'name': 'view-other_static-visitor_export',
		'components': {
			CompLoading,
			CompToast,
//			CompBanner(resolve) {
//				return require.ensure([], require => resolve(require('@/components/banner.vue')), 'banner');
//			}
		},
		data() {
			return {
//				'bannerList': [],
//				'list': [],
				'isLoadingShow': false,
				'isToastShow': false,
				'toastMessage': ''
			};
		},
		'watch': {
			toastMessage(newToastMessage) {
				this.isToastShow = !!newToastMessage;
			}
		},
		'methods': {
//			bannerNavigate(item) {
//				this.loadingShow(true);
//				this.bannerStatistic(item).then(data => {
//					this.loadingShow(false);
//					location.assign(item.targetUrl);
//				}).catch(err => {
//					this.loadingShow(false);
//					this.toastShow('打开失败，请稍后重试');
//				});
//			},
//			bannerStatistic(item) {
//				return this.$post('/api/activity/saveClickLog.htm', {
//					'advertisementId': item.advertisementId,
//					'type': 2,
//					'orderNum': item.orderNum
//				}).then(data => {
//					if (data.result !== 0) {
//						throw data.resultMessage;
//					}
//					this.$sensorsH5Click({
//						'tgt_type': 'button',
//						'tgt_name': `h5-ACT-导流页-banner-${item.title}`,
//						'tgt_event_id': 'h5_ACT_button',
//						'position': item.orderNum,
//						'url': location.href,
//						'target_url': item.targetUrl
//					});
//					return item;
//				});
//			},
//			listNavigate(item) {
//				this.loadingShow(true);
//				this.listStatistic(item).then(data => {
//					this.loadingShow(false);
//					location.assign(item.targetUrl);
//				}).catch(err => {
//					this.loadingShow(false);
//					this.toastShow('打开失败，请稍后重试');
//				});
//			},
//			listStatistic(item) {
//				return this.$post('/api/activity/saveClickLog.htm', {
//					'advertisementId': item.advertisementId,
//					'type': 1,
//					'orderNum': item.orderNum
//				}).then(data => {
//					if (data.result !== 0) {
//						throw data.resultMessage;
//					}
//					this.$sensorsH5Click({
//						'tgt_type': 'button',
//						'tgt_name': `h5-ACT-导流页-list-${item.title}`,
//						'tgt_event_id': 'h5_ACT_button',
//						'position': item.orderNum,
//						'url': location.href,
//						'target_url': item.targetUrl
//					});
//					return item;
//				});
//			},
			loadingShow(isShow) {
				this.isLoadingShow = !!isShow;
			},
			toastShow(msg) {
				this.toastMessage = msg;
			},
			toastHide() {
				this.toastMessage = '';
			}
		},
		created() {
			this.loadingShow(true);
//			this.$post('/api/activity/listThirdAdvertisement.htm', {
//				/*'page': 1,
//				'pageSize': 10*/
//			}).then(data => {
//				if (data.result !== 0 || !data.content) {
//					throw data.resultMessage;
//				}
//				if (!data.content.bannerList) {
//					console.log('Banner数据获取失败');
//					data.content.bannerList = [];
//				}
//				if (!data.content.otherList) {
//					console.log('列表数据获取失败');
//					data.content.otherList = [];
//				}
//				return data;
//			}).then(data => {
//				let tenThousand = 10000;
//				this.loadingShow(false);
//				this.bannerList = data.content.bannerList.map(item => Object.assign({
//					'bannerClick': item => {
//						this.bannerNavigate(item);
//					}
//				}, item, {
//					'bannerImg': item.logo,
//					'bannerTitle': item.title
//				}));
//				this.list = data.content.otherList.map(item => Object.assign({
//					'limit': this.$divide(item.maxLimite, tenThousand)
//				}, item));
//			}).catch(err => {
//				this.toastShow('加载失败，请刷新重试');
//			});
			this.$post('/api/activity/grayRule.htm', {}).then(data => {
				if (data.result !== 0 || !data.content) {
					throw data.resultMessage;
				}
				return data;
			}).then(data => {
				this.loadingShow(false);
				location.assign(data.content);
			}).catch(err => {
				this.toastShow('加载失败，请刷新重试');
			});
		}
	};
</script>

<style scoped type="text/scss">
	.visitor-export {
		overflow: hidden;
		min-height: 100%;
		background-color: #f3f2f8;
	}
	.no-response {
		margin-top: 2.67%;
		padding: 10px 0;
		border-bottom: 1px solid #e8e8e8;
		text-align: center;
		background-color: #ffffff;
		h2 {
			height: 20px;
			margin: 0;
			color: #262626;
			font-size: 13px;
			line-height: 20px;
			&::before,
			&::after {
				content: '';
				display: inline-block;
				position: relative;
				top: -2px;
				width: 5px;
				height: 5px;
				margin: 0 6px;
				border-radius: 50%;
				background-color: #e1ca99;
			}
		}
		p {
			height: 18px;
			margin: 2px 0 0;
			color: #9c9c9c;
			font-size: 12px;
			line-height: 18px;
		}
	}
	ul {
		margin: 0 0 2.67%;
		padding: 0;
		list-style-type: none;
		background-color: #ffffff;
		li {
			position: relative;
			padding: 6.67% 4% 4%;
			&::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				width: 96%;
				height: 1px;
				background-color: #e8e8e8;
			}
			&:first-child::before {
				display: none;
			}
			&::after {
				content: "";
				display: table;
				clear: both;
			}
			img {
				float: left;
				width: 51px;
				margin: 0 3.19% 2.9% 0;
				border-radius: 5px;
				font-size: 12px;
			}
			div {
				position: relative;
				overflow: hidden;
				margin-bottom: 2.9%;
				&::before {
					content: "";
					position: absolute;
					top: 50%;
					left: 46.29%;
					width: 1px;
					height: 1em;
					margin-top: -0.5em;
					background-color: #d8d8d8;
				}
				h2,
				a,
				p {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				h2,
				.limit,
				.rate {
					float: left;
				}
				a {
					float: right;
				}
				h2,
				.limit {
					max-width: 46.29%;
				}
				a,
				.rate {
					max-width: 53.71%;
				}
				h2 {
					height: 24px;
					margin: 0;
					font-weight: normal;
					font-size: 17px;
					line-height: 24px;
				}
				p {
					height: 22px;
					margin: 4px 0 0;
					font-size: 13px;
					line-height: 22px;
					&.limit {
						clear: both;
						span {
							color: #ff0030;
						}
					}
					&.rate {
						position: absolute;
						top: 28px;
						left: 46.29%;
						margin-left: 9.35%;
					}
				}
				span {
					padding: 0 0.2em;
					font-size: 16px;
				}
				a {
					display: inline-block;
					height: 28px;
					padding: 0 14px;
					border-radius: 14px;
					color: #ffffff;
					font-size: 13px;
					line-height: 28px;
					background-color: #88b5ff;
				}
			}
			> p {
				overflow: hidden;
				float: left;
				clear: both;
				height: 24px;
				margin: 0;
				padding: 0 12px;
				border-radius: 12px;
				color: #9c9c9c;
				font-size: 12px;
				line-height: 24px;
				text-overflow: ellipsis;
				white-space: nowrap;
				background-color: rgba(216,216,216,0.33);
			}
		}
	}
</style>
<style type="text/scss">
	.swiper-pagination {
		.swiper-pagination-bullet {
			display: inline-block;
			width: 0.5em;
			height: 0.5em;
			margin: 0 0.25em;
			border-radius: 100%;
			background-color: rgba(0,0,0,0.3);
		}
		.swiper-pagination-bullet-active {
			background-color: rgba(255,255,255,0.8);
		}
	}
</style>
